<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<style>
					#divA
					{
						width: 200px;
						height: 200px;
						background-color: lightsalmon;
						padding: 10px;
					}
					
					#divB
					{
						
							width: 100px;
							height: 100px;
							background-color: lightblue;
							padding: 10px;
					}
					#divC
					{
						
							width: 50px;
							height: 50px;
							background-color: lightgoldenrodyellow;
							padding: 10px;
					}
					
				</style>
	</head>
	<body>
		<div id="divA">
					<div id="divB">
						<div id="divC">
							C
						</div>
						B
					</div>
					A
				</div>
				
				<script>
					
					// 1。 冒泡 (默认   从里到外)
					// divA.onclick = function(){
					// 	alert("A被点击了")
					// }
					// divB.onclick = function(){
					// 	alert("B被点击了")
					// }
					// divC.onclick = function(){
					// 	alert("C被点击了")
					// }
					
					
					// 2. 捕获  (默认   从外到里)
					divA.addEventListener("click",function(){
						alert("A被点击了")
					},true)
					divB.addEventListener("click",function(){
						alert("B被点击了")
					},true)
					divC.addEventListener("click",function(){
						alert("C被点击了")
					},true)
					
					
				</script>
	</body>
</html>
